<template>
  <view class="waterfall">
    <up-waterfall v-model="shopList" ref="uWaterfallRef">
      <template v-slot:left="{ leftList }">
        <view v-for="(litem, index) in leftList" :key="index" class="shop-warter" @click="onGoodsDetail(litem)">
          <up-lazy-load :threshold="-450" border-radius="10" :image="litem.images" :index="index" />
          <view class="shop-title">{{ litem.name }}</view>
          <view class="shop-price">
            <text class="unit">￥</text>
            <text class="price">{{litem.price}}</text>
          </view>
        </view>
      </template>
      <template v-slot:right="{ rightList }">
        <view v-for="(ritem, index) in rightList" :key="index" class="shop-warter" @click="onGoodsDetail(ritem)">
          <up-lazy-load :threshold="-450" border-radius="10" :image="ritem.images" :index="index" />
          <view class="shop-title">{{ ritem.name }}</view>
          <view class="shop-price">
            <text class="unit">￥</text>
            <text class="price">{{ritem.price}}</text>
          </view>
        </view>
      </template>
    </up-waterfall>
    <view class="pb-10">
      <up-loadmore :status="loadStatus" @loadmore="onAddRandomData" />
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(["addRandomData"]);
const props = defineProps({
  loadStatus: {
    type: String,
    default: ""
  },
  flowList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});

const uWaterfallRef = ref();
const shopList = ref([]);

watch(
  () => props.flowList,
  (newValue, oldValue) => {
    shopList.value = props.flowList;
  },
  {
    immediate: true,
    deep: true
  }
);

// 加载更多数据
const onAddRandomData = () => {
  emit("addRandomData");
};

// 商品详情
const onGoodsDetail = (item) => {
  uni.navigateTo({
    url: "/pages/good/details?id=" + item.productId
  });
};

// 瀑布流数据清空
const onClear = () => {
  uWaterfallRef.value.clear();
};
defineExpose({ onClear });
</script>

<style lang="scss" scoped>
.waterfall {
  .shop-warter {
    border-radius: 16rpx;
    margin: 10rpx;
    background-color: #ffffff;
    padding: 16rpx;
    box-sizing: border-box;
    position: relative;
  }

  .u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
  }

  .shop-image {
    width: 100%;
    border-radius: 8rpx;
  }

  .shop-title {
    font-size: 30rpx;
    margin-top: 10rpx;
  }

  .shop-price {
    color: #000;
    margin-top: 10rpx;
    .price {
      font-size: 28rpx;
      font-weight: bold;
    }
    .unit{
      font-size: 28rpx;
    }
  }
}
</style>
